<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@page contentType="text/html,charset=UTF-8" pageEncoding="UTF-8"%>
<jsp:include page="include/header.jsp"></jsp:include>
<body>
	<div class="jSubc">
		<div class="container">
			<form action="index_submit" id="jSubc" method="get"
				accept-charset="utf-8">
				<div class="grid_4">
					<label for="">Chá»n thÃ nh phá»</label> <select name="jCity">
						<option value="1">Choose your city</option>
						<option value="2">Hochiminh</option>
						<option value="3">Hanoi</option>
						<option value="4">Cantho</option>
					</select>
				</div>
				<div class="grid_4">
					<label for="">Email nhan tin</label> <input type="text"
						name="jEmail" value="" placeholder="">
				</div>
				<div class="grid_4">
					<label for="">Dang ky</label> <input type="submit" name=""
						value="Nháº­n thÃ´ng tin">
				</div>
			</form>
		</div>
	</div>
	<div class="container">
		<header id="header" class="">
			<nav>
				<ul id="top-menu">
					<li class="subscribed"><a href="#nowhere" class="jSubs"
						title="subscribed"><em>@</em> subscribed <span>+</span></a></li>
					<li class="voucher"><a href="#nowhere" title="my vouchers"><em>,</em>
							my vouchers</a></li>
					<li class="login"><a href="#nowhere" class="jLogin"
						title="login">ÄÄng kÃ½ <em>{</em>
					</a>
						<div class="login-option">
							<div class="arrow">
								<em>'</em>
							</div>
							<!-- <h1>Login</h1> -->
							<form action="" id="jLogin" method="get" accept-charset="utf-8">
								<p>
									<label for="">Your Email Address:</label> <input type="text"
										name="jEmail" value="" placeholder="">
								</p>
								<p>
									<label for="">Password:</label> <input type="text" name="jPass"
										value="" placeholder="">
								</p>
								<p class="forgot">
									<a href="" title=""> Forgot your password?</a> <a href="@"
										title="">Sign up</a>
								</p>
								<p class="remember">
									<input type="checkbox" name="" value=""> <label for="">Remember
										me on this computer</label> <br class="clear">
								</p>
								<p class="login">
									<input type="submit" name="" value="Login to Mdeal">
								</p>
							</form>
							<div class="social-login">
								<h1>login with socia media</h1>
								<a href="#" title="facebook" class="facebook"><em>f</em>Facebook</a>
								<a href="#" title="Twitter" class="twitter"><em>t</em>Twitter</a>
								<br class="clear">
							</div>
						</div></li>
					<li class="signup"><a href="#nowhere" title="sign up"><em></em>
							sign up</a></li>
					<li class="user"><a href="#" title="">VÃµ Minh Máº«n</a>
						<div class="userPanel">
							<ul>
								<li class="first"><a href="#" title=""><em>U</em> My
										account</a></li>
								<li><a href="#" title=""><em>,</em> Purchase history</a></li>
								<li><a href="#" title=""><em>P</em> Subsciption</a></li>
								<li class="last"><a href="#" title=""><em>X</em> Log
										out</a></li>
							</ul>
						</div></li>
				</ul>
			</nav>
		</header>
		<!-- /header -->

		<aside class="grid_3">
			<section class="logo">
				<img src="images/logo.png" alt="">
			</section>
			<!-- END SECTION LOGO -->
			<jsp:include page="include/left-category.jsp"></jsp:include>
		</aside>
		<!-- END ASIDE -->

		<article class="grid_9">
			<section class="top-tabs">
				<nav id="tabs">
					<ul>
						<li class="first"><a href="#nowhere" title="">travel</a></li>
						<li class="active"><a href="#nowhere" title="">entertainment</a></li>
						<li><a href="#nowhere" title="">technology</a></li>
					</ul>
					<form action="" method="get" id="search" accept-charset="utf-8">
						<input type="text" name="" value="" placeholder="insert your item">
						<input type="submit" name="" value="l">
					</form>
					<br class="clear">
				</nav>
			</section>
			<!-- END SECTION TABs -->
			<section id="fullmode" class="main-content">
				<ul id="filter">
					<li class="active first"><a class="all" href="#" title="">All</a></li>
					<li><a class="popular" href="#" title="">popular</a></li>
					<li><a class="new" href="#" title="">new</a></li>
					<li><a class="soon" href="#" title="">ending soon</a></li>
					<li><a class="gone" href="#" title="">almost gone</a></li>
				</ul>
				<div id="grids-2" class="filter-handle">
					<c:if test="${pageFirst!= 0 }">
						<c:url value="/page.html" var="pageFirstURL">
							<c:param name="page" value="${pageFirst}" />
						</c:url>
						<a id="pageNav" href="${pageFirstURL}">first</a>
					</c:if>
					<c:if test="${pagePrevious != 0 }">
						<c:url value="/page.html" var="pagePreviousURL">
							<c:param name="page" value="${pagePrevious}" />
						</c:url>
						<a id="pageNav" href="${pagePreviousURL}">previous</a>
					</c:if>
					<c:forEach items="${pageNav}" varStatus="page">
						<c:url value="/page.html" var="pageURL">
							<c:param name="page" value="${page.count}" />
						</c:url>
						<a id="pageNav" href="${pageURL}">${page.count}</a>
					</c:forEach>
					<c:if test="${pageNext != 0 }">
						<c:url value="/page.html" var="pageNextURL">
							<c:param name="page" value="${pageNext}" />
						</c:url>
						<a id="pageNav" href="${pageNextURL}">next</a>
					</c:if>
					<c:if test="${pageLast != 0 }">
						<c:url value="/page.html" var="pageLastURL">
							<c:param name="page" value="${pageLast}" />
						</c:url>
						<a id="pageNav" href="${pageLastURL}">last</a>
					</c:if>
					<c:choose>
						<c:when test="${requestScope.first != null }">
							<section class="first-item">
								<img src="${first.image}" width="660" height="300" alt="">
								<div class="saleOff">
									<small>%</small>${first.percentage}%
								</div>
								<div class="featuredItem">
									<h1>${first.title}</h1>
									<p>${first.short_content}</p>
									<c:url value="detail.html" var="displayURL">
										<c:param name="code" value="${first.id}" />
										<c:param name="title" value="${first.title}"></c:param>
									</c:url>
									<a href='<c:out value="${displayURL}"/>' title=""
										class="button blue super upper more">view deal</a>
									<div class="detail">
										<h4 style="font-size: 15px;">
											<small>s</small>
											<fmt:formatNumber type="number" maxIntegerDigits="10"
												value="${first.price_down}" />
											VNÄ
										</h4>
										<h5>
											<small>C</small>
											<fmt:formatDate pattern="hh:mm:ss"
												value="${first.count_down}" />
										</h5>
									</div>
								</div>
							</section>
							<!-- END SECTION ONE -->
						</c:when>
						<c:otherwise>
							<section style="float: none; display: none;"></section>
						</c:otherwise>
					</c:choose>
					<c:forEach var="deal" items="${requestScope.deals}"
						varStatus="count">
						<c:choose>
							<c:when test="${count.count % 2 == 0}">
								<c:set var="addClass"
									value='class="odd" style="margin-right:0px;"'></c:set>
							</c:when>
							<c:otherwise>
								<c:set var="addClass" value='style="margin-right:18px;"'></c:set>
							</c:otherwise>
						</c:choose>
						<section ${addClass}>
							<div class="saleOff">
								<small>%</small>${deal.percentage}%
							</div>
							<div class="top">
								<img src="${deal.image}" alt="">
								<div class="hover">
									<h1>${deal.title}</h1>
									<p>${deal.short_content}</p>
									<c:url value="detail.html" var="displayURL">
										<c:param name="code" value="${deal.id}" />
										<c:param name="title" value="${deal.title}"></c:param>
									</c:url>
									<a href='<c:out value="${displayURL}"/>'
										class="button blue super upper more">view deal</a>
								</div>
								<div class="detail">
									<h4>
										<small>s</small>
										<fmt:formatNumber type="number" maxIntegerDigits="10"
											value="${deal.price_down}" />
										VNÄ
									</h4>
									<h5>
										<small>C</small>
										<fmt:formatDate pattern="hh:mm:ss" value="${deal.count_down}" />
									</h5>
								</div>
							</div>
							<div class="bot">
								<h2>${deal.title}</h2>
								<div class="star">
									<i></i> <i></i> <i></i>
								</div>
							</div>
						</section>
					</c:forEach>
					<!-- END SECTION ITEM -->
					<div class="clear"></div>
				</div>
			</section>
			<!-- END CONTENT -->
			<br class="clear">
		</article>

		<!-- END ARTICLE -->
		<jsp:include page="include/footer.jsp"></jsp:include>